<template>
  <el-container class="layout-container">
    <!-- 侧边栏 -->
    <el-aside class="sidebar-container">
      <Sidebar :isCollapse="isCollapse" @toggle-collapse="toggleCollapse" />
    </el-aside>
  
    <el-container>
      <!-- 头部区域 -->
      <el-header class="header-container">
        <Header :collapse="isCollapse" @toggle-collapse="toggleCollapse" />
      </el-header>
  
      <!-- 内容区域 -->
      <el-main class="main-container">
        <router-view v-slot="{ Component }">
          <transition name="fade-transform" mode="out-in">
            <keep-alive :include="keepAliveComponents">
              <component :is="Component" />
            </keep-alive>
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'
import Sidebar from './components/Sidebar.vue'
import Header from './components/Header.vue'

// 侧边栏折叠状态
const isCollapse = ref(false)

// 需要缓存的组件名列表（根据路由meta配置动态获取）
const keepAliveComponents = ref([])

// 切换侧边栏折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}
</script>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;

  .header-container {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }

  .main-container {
    padding: 20px;
    background: #f0f2f5;
  }
}
</style>